<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" lang="en" xml:lang="en">
<head>
  <title>Title</title>
  
  <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
  <meta name="keywords" content=""/>
  <meta name="description" content=""/>  
  <meta name="robots" content="index, follow" />
 
  <link rel="stylesheet" type="text/css" href="css/style.css" />
  <link href='http://fonts.googleapis.com/css?family=Open+Sans+Condensed:700&subset=latin,vietnamese,latin-ext' rel='stylesheet' type='text/css'>
  <script type="text/javascript" src="js/jquery.min.js"></script>
  <script type="text/javascript" src="js/jquery.cycle.all.js"></script>
  <script type="text/javascript" src="js/functions.js"></script>
    
</head>
<body>
<div id="top">
  <div id="wrap-user-border">
    <div id="wrap-user-border2">
      <div id="wrap-user">
        <div id="user-message">Good morning <strong>Guest</strong></div>
        <ul id="user-menu">
          <li><a href="#">Sign Up</a></li>
          <li><a href="#">My account</a></li>
        </ul>
      </div>
    </div>
  </div>
  <div id="header">
    <div id="header-top">
      <div id="wrap-logo">
        <a href="1_homepage.html"><img src="images/logo.png" alt="" /></a>
      </div>
      <div id="wrap-header-info">
        <div id="cart">
          <div id="cart-title">SHOPPING CART</div>
          <div id="cart-summarry">Total: <a href="#" class="items">2 items</a> Amout: <span class="price">$356</span></div>
        </div>
        <div id="work-hours">
          <div class="white-line">To buy or help call <strong>01-2345-6789</strong></div>
          <div class="pink-line">Tuesday to Sunday from 10AM to 7PM</div>
        </div>
      </div>
    </div>
    <div id="header-bottom">
        <ul id="header-menu">
        <li><a href="2_homepage.html" class="active">HOME</a></li>
        <li><a href="1_homepage.html" class="inactive special">HOT DEALS!</a></li>
        <li><a href="2_homepage.html" class="inactive">ABOUT US</a></li>
        <li><a href="1_homepage.html" class="inactive">HOW TO BUY?</a></li>
        <li><a href="2_homepage.html" class="inactive">HOW DO I PAY?</a></li>
        <li><a href="1_homepage.html" class="inactive">FAQ</a></li>
        <li><a href="2_homepage.html" class="inactive">CONTACT US</a></li>
      </ul>
      <div id="search">
        <form id="search-form" action="" method="post">
          <div style="float: left;"><input class="nice_search" type="text" name="search" value="Product search..." /></div>
          <div style="float: left;"><input class="nice_submit" type="submit" name="submit_search" value="" /></div>
        </form>
      </div>
    </div>
  </div>
</div>
<div id="wrap-content">
  <div id="breadcrumb">
    <a href="#" class="breadcrumbHome">Homepage</a><span class="seperator"> &nbsp; </span><a href="#">Computers</a><span class="seperator"> &nbsp; </span><a href="#">Laptops</a><span class="seperator"> &nbsp; </span><span>Dell</span>
  </div>
  <div id="main-content">
    <div id="left-column">
      <div id="wrap-cart-summary">
        <div class="wrap-title-black">
          <h2 class="nice-title">CART SUMMARY</h2>
        </div>
        <div id="cart-summary">
          <a href="#" class="review-details">Review Cart Details</a>
          <ul id="cart-summary-list">
            <li>                   
              <div class="image">
                <a href="#"><img alt="" src="images/product-image-small.jpg" /></a>
              </div>
              <div class="info">
                <h4><a href="#">Sony - Walkman 4GB* MP3 Player with FM Radio - Blue</a></h4>
                <p>Our Price: <strong>$1899.99</strong></p>
              </div>
            </li>
            <li>                   
              <div class="image">
                <a href="#"><img alt="" src="images/product-image-small.jpg" /></a>
              </div>
              <div class="info">
                <h4><a href="#">Sony - Walkman 4GB* MP3 Player with FM Radio - Blue</a></h4>
                <p>Our Price: <strong>$1899.99</strong></p>
              </div>
            </li>
            <li>                   
              <div class="image">
                <a href="#"><img alt="" src="images/product-image-small.jpg" /></a>
              </div>
              <div class="info">
                <h4><a href="#">Sony - Walkman 4GB* MP3 Player with FM Radio - Blue</a></h4>
                <p>Our Price: <strong>$1899.99</strong></p>
              </div>
            </li>
          </ul>
          <div class="row">
            <div class="l">Product total:</div><div class="r">$699.00</div>
          </div>
          <div class="row">
            <div class="l">Shipping &amp; Handling:</div><div class="r">$12.00</div>
          </div>
          <div class="row2">
            <div class="l"><span>Subtotal:</span></div><div class="r">$1299.00</div>
          </div>
        </div>
      </div>
      <div class="left-block">
        <h2 class="nice-title2">NEWSLETTER</h2>
        <div class="block-content">
          <form id="newsletter-form" action="" method="post">
            <p class="info">Sign up for our weekly newsletter and stay up-to-date with the latest offers, and newest products.</p>
            <p><input id="newsletter-value" class="nice-i" type="text" name="newsletter-email" value="Enter your email" /></p>
            <p><input class="nice-s" type="submit" name="newsletter-submit" value="SUBMIT" /></p>
          </form>
        </div>
      </div>
      <div class="left-block">
        <h2 class="nice-title2">CUSTOMER SUPPORT</h2>
        <div class="block-content" style="padding: 0px; width: 230px;">
          <p class="support"><a href="#">Email Asisstance</a></p>
          <p class="support"><a href="#">FAQs</a></p>
          <p class="support" style="border-bottom: 0px;"><span>Call 1-800-123-4567</span></p>
        </div>
      </div>
      <div class="left-block">
        <div class="block-content2">
          <img src="images/paypal-cards.jpg" alt="paypal cards" />
        </div>
      </div>
    </div>
    <div id="right-column">
      <div id="content">
        <div id="wrap-checkout">
          <div class="wrap-title-black">
            <h1 class="nice-title checkout">CHECKOUT</h1>
          </div>            
          <div id="checkout-steps">
            <div class="l">
              <div class="step">
                <div class="step-id active">1</div>
                <div class="step-name active">Your info</div>
              </div>
              <div class="step">
                <div class="step-id">2</div>
                <div class="step-name">Delivery info</div>
              </div>
              <div class="step">
                <div class="step-id">3</div>
                <div class="step-name">Order details</div>
              </div>
              <div class="step">
                <div class="step-id">4</div>
                <div class="step-name">Payment</div>
              </div>
              <div class="step">
                <div class="step-id">5</div>
                <div class="step-name">Review &amp; Submit</div>
              </div>
              <div class="step">
                <div class="step-id">6</div>
                <div class="step-name">Complete</div>
              </div>
            </div>
            <div class="r">Secure Shopping Guarantee</div>
          </div>
          <div id="checkout-main">
            <div class="subinfo">
              <div class="l">Billing adress</div>
              <div class="r2">*Required fields</div>
            </div>
            <form id="checkout1-form" method="post" action="">
              <div class="row">
                <div class="l">
                  <label class="required">*First name</label>
                  <input class="nice-i" type="text" name="firstname" value="" />
                </div>
                <div class="r">
                  <label class="required">*Second name</label>
                  <input class="nice-i" type="text" name="secondname" value="" />
                </div>
              </div>
              <div class="row2">
                <label class="required">*Address</label>
                <input class="nice-i" type="text" name="address" value="" />
              </div>
              <div class="row2">
                <label>Adress Line 2 (optional)</label>
                <input class="nice-i" type="text" name="address2" value="" />
              </div>
              <div class="row">
                <div class="l">
                  <label class="required">*City</label>
                  <input class="nice-i" type="text" name="city" value="" />
                </div>
                <div class="c">
                  <label class="required">*State</label>
                  <select name="state">
                    <option value="1">New york</option>
                    <option value="2">Las Vegas</option>
                    <option value="3">Washington</option>
                    <option value="4">Berlyn</option>
                  </select>
                </div>
                <div class="r2">
                  <label class="required">*ZIP Code (5 digit)</label>
                  <input class="nice-i" type="text" name="zipcode" value="" />
                </div>
              </div>
              <div class="row">
                <div class="l">
                  <label class="required">*Country</label>
                  <input class="nice-i" type="text" name="country" value="" />
                </div>
                <div class="r">
                  <a href="#" class="note">Important Note for International Customers</a>
                </div>
              </div>
              <div class="row">
                <div class="l">
                  <label class="required">*Phone</label>
                  <input class="nice-i" type="text" name="phone" value="" />
                </div>
                <div class="r">
                  <label>Other phone</label>
                  <input class="nice-i" type="text" name="phone2" value="" />
                </div>
              </div>
              <div class="row3">
                <input class="r" type="checkbox" name="same-address" /><span>Yes, my BILLING and SHIPPING addresses are the same</span>
              </div>
              <p>
                <strong>Contact Information</strong><br/>Your e-mail address is required so we can send you a confirmation of your order. Any information you provide will be handled according to our <a href="#">Privacy Policy</a>.
              </p>
              <div class="row">
                <div class="l">
                  <label class="required">*Email address</label>
                  <input class="nice-i" type="text" name="email" value="" />
                </div>
                <div class="r">
                  <label class="required">*Retype E-Mail Address</label>
                  <input class="nice-i" type="text" name="retype-email" value="" />
                </div>
              </div>
            </form>
          </div>
          <div class="footer-links">
            <div class="l"><a href="#" class="nice-a">BACK</a></div>
            <div class="r"><a href="#" class="nice-a">CONTINUE</a></div>
          </div>
        </div>
      </div>
    </div>
  </div>
</div>
<div id="footer">
  <div id="wrap-footer-links">
    <div id="footer-links">
      <div class="wrap-links">
        <h3>ORDER SUPPORT</h3>
        <ul>
          <li><a href="#">Order Status</a></li>
          <li><a href="#">Shipping &amp; Store Pickup</a></li>
          <li><a href="#">International Orders</a></li>
          <li><a href="#">Returns &amp; Refunds</a></li>
          <li><a href="#">Customer Service</a></li>
        </ul>
      </div>
      <div class="wrap-links">
        <h3>PRODUCT SUPPORT</h3>
        <ul>
          <li><a href="#">Order Support</a></li>
          <li><a href="#">Order Status</a></li>
          <li><a href="#">Shipping &amp; Store Pickup</a></li>
          <li><a href="#">International Orders</a></li>
          <li><a href="#">Store Pickup</a></li>
          <li><a href="#">Returns &amp; Refunds</a></li>
          <li><a href="#">Customer Service</a></li>
        </ul>
      </div>
      <div class="wrap-links">
        <h3>CREDIT CARDS</h3>
        <ul>
          <li><a href="#">Apply Now</a></li>
          <li><a href="#">Make a Payment</a></li>
          <li><a href="#">Card Benefits</a></li>
        </ul>
        <h3 style="margin-top: 10px;">REWARD ZONE PROGRAM</h3>
        <ul>
          <li><a href="#">Learn More</a></li>
          <li><a href="#">Check Your Points</a></li>
        </ul>
      </div>
      <div class="wrap-links">
        <h3>LEGAL</h3>
        <ul>
          <li><a href="#">Conditions of Use</a></li>
          <li><a href="#">Legal Notices</a></li>
          <li><a href="#">Privacy Policy</a></li>
          <li><a href="#">California Privacy Rights</a></li>
          <li><a href="#">Price Match Guarantees</a></li>
        </ul>
      </div>
    </div>
  </div>
  <div id="wrap-bottom">
    <div id="bottom">
      <p class="left">2010 ProShopping - All rights reserved.</p>
      <div class="right"><p>Follow Us:</p><p><a href="#"><img src="images/skype-icon.png" alt="" /></a><a href="#"><img src="images/twiter-icon.png" alt="" /></a><a href="#"><img src="images/fb-icon.png" alt="" /></a></p></div>
    </div>
  </div>
</div>
</body>
</html>